<template>
  <div class="alarmSystem">
    <my-search-form v-bind="searchFormConfig" @search="search" />

    <my-table
      :tableConfig="tableConfig"
      :tableData="contentData"
      :totalCount="158"
    >
      <template #defaultTotal>
        <div class="datatotal">
          待处理
          <span>{{ 30 }}</span
          >项
        </div>
        <div class="datatotal">
          处理中<span>{{ 30 }}</span
          >项
        </div>
        <div class="datatotal">
          已处理<span>{{ 30 }}</span
          >项
        </div>
      </template>
      <template #handle="scope">
        <div class="btnGroup" :key="scope.index">
          <el-button size="mini">定位</el-button>
          <el-button size="mini">派单</el-button>
          <el-button size="mini">详情</el-button>
        </div>
      </template>
    </my-table>
  </div>
</template>

<script>
import MySearchForm from "@/components/mySearchForm/mySearchForm.vue";
import myTable from "@/components/myTable/myTable.vue";
import { tableConfig, searchFormConfig } from "./src/config";
export default {
  components: { myTable, MySearchForm },
  data() {
    return {
      contentData: [
        {
          value1: "电梯管理",
          value2: "图书馆东侧电梯1",
          value3: "图书馆",
          value4: "电梯管理",
          value5: "故障报警",
          value6: "某方",
          value7: "DT000001",
          value8: "2021-07-11 11:09:22",
          value9: "0:01:45",
          value10: "待处理",
          value11: "-"
        }
      ],
      tableConfig,
      searchFormConfig
    };
  },
  methods: {
    search(data) {
      console.log(data);
    },
    // 假数据
    initDataTest() {
      for (let i = 0; i < 9; i++) {
        const data = JSON.parse(JSON.stringify(this.contentData[0]));
        data.value1 = "电梯故障" + (i + 1);
        this.contentData.push(data);
      }
    }
  },
  mounted() {
    this.initDataTest();
  }
};
</script>

<style lang="scss" scoped>
@mixin flexLayout {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.alarmSystem {
  margin-right: 10px;
  margin-top: 10px;
  // padding: 10px 30px;
  //     padding-bottom: 40px;
  .searchBox {
    background-color: #fff;
    border-radius: 5px;
    padding: 10px 20px;
    @include flexLayout;
    .dataPicker {
      /deep/ .el-input__inner {
        max-width: 235px;
      }
    }
  }
}
</style>
